{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% load icons %}

{% block page_heading_extra %}
<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-end">
    {% icon 'plus' %}
</a>
{% include 'search_block.html' %}
{% endblock page_heading_extra %}

{% block content %}
<div class="page-wrapper">
    <!--block content-->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        AppStore
                    </div>
                    <h2 class="page-title">
                        {% trans "AppStore" %}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <div class="card-actions">
                        {% comment %} <a href="{% url 'appstore:appstore_create' %}" class="btn float-end">
                            {% icon 'plus' %}
                        </a> {% endcomment %}
                        {% include 'create_appstore_data.html' %}
                    </div>
                </div>

                <div class="card-body">
                    <div class="col-lg-12">
                        <table id="appstoreTable" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th span="col">{% trans "name" %}</th>
                                    <th span="col">{% trans "type" %}</th>
                                    <th span="col">{% trans "kernel" %}</th>
                                    <th span="col">{% trans "VCPU" %}</th>
                                    <th span="col">{% trans "RAM" %}(MB)</th>
                                    {% comment %} <th span="col">{% trans "sysdisk" %}</th> {% endcomment %}
                                    <th span="col">{% trans "titimg" %}</th>
                                    <th span="col">{% trans "volimg" %}</th>
                                    <th span="col">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody class="searchable">
                                {% for appline in app_data %}
                                <tr>
                                    <td>{{ appline.name }}</td>
                                    <td>{{ appline.get_type_display }}</td>
                                    <td>{{ appline.kernel }}</td>
                                    <td>{{ appline.vcpu }}</td>
                                    <td>{{ appline.ram }}</td>
                                    {% comment %} <td>{{ appline.sysdisk }}</td> {% endcomment %}
                                    <td><img src="/files/{{ appline.titimg }}" width="32"></td>
                                    <td>{{ appline.volimg }}</td>
                                    <td><a class="btn btn-ghost-danger" title="{%trans "Delete" %}" href="{% url 'appstore:appstore_delete' appline.id %}">{% icon 'times' %}</a></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                        {% comment %} </div> {% endcomment %}
                    {% comment %} </div> {% endcomment %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
<link href="{% static 'css/jquery.dataTables.min.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
{% comment %} <script type="text/javascript" src="{% static 'js/dataTables.bootstrap.min.js' %}"></script> {% endcomment %}
<script>
    $('#appstoreTable').DataTable({
        autoWidth:true,////不开启自动宽度，用bootstrap的自适应去调整
        "lengthMenu": [10, 20, 50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
        "displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
        "order": [],
        "language": {//自定义语言提示
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有找到相应的结果",
            "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
            "infoEmpty": "第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "search": "搜索",
            "infoPostFix": "",
            "url": "",
            "thousands": "'",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
            }
        }
    });
</script>
{% endblock script %}
